<template>
    <div v-loading="loading">
        <el-dialog :title="type == 'create' ? '添加标签' : '修改标签'" :visible.sync="visible" width="800px">
            <el-form :model="form">
                <el-form-item label="名称">
                    <el-input placeholder="请输入名称" style="width: 500px" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select placeholder="选择类型" style="width: 500px" v-model="form.type">
                        <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用人数">
                    <el-input placeholder="请输入使用人数" style="width: 472px" v-model="form.used"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button :loading="submitComplete" @click="submit" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.keyword"></el-input>
            <el-select clearable placeholder="选择类型" v-model="query.type">
                <el-option label="用户" value="user"></el-option>
                <el-option label="长视频" value="long"></el-option>
                <el-option label="短视频" value="short"></el-option>
                <el-option label="投诉" value="complaints"></el-option>
            </el-select>
            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
            <el-button @click="toForm()" size="small" style="margin-left:100px" type="success" v-permission="['ADMIN','LABELS_ADD']">添加</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="类型" prop="type">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 'user'">用户</div>
                        <div v-else-if="scope.row.type == 'long'">长视频</div>
                        <div v-else-if="scope.row.type == 'short'">短视频</div>
                        <div v-else-if="scope.row.type == 'complaints'">投诉</div>
                        <div v-else>其他</div>
                    </template>
                </el-table-column>
                <el-table-column label="使用人数" prop="used"></el-table-column>

                <el-table-column label="添加时间" prop="created_at" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" style="padding: 10px" type="primary" v-permission="['ADMIN','LABELS_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger" v-permission="['ADMIN','LABELS_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange" layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name: 'tag-list',
    mixins: [initData],
    components: {
        treeSelect,
        medium,
    },
    data() {
        return {
            query: {
                name: '',
                label_status: '',
            },
            form: {
                name: '',
                type: '',
                used: '',
            },
            visible: false,
            loading: false,
            data: [],
            page: 1,
            tableData: [],
            type: 'create',
            worksId: '',
            typeList: [
                {
                    name: '用户',
                    value: 'user',
                },
                {
                    name: '长视频',
                    value: 'long',
                },
                {
                    name: '短视频',
                    value: 'short',
                },
                {
                    name: '投诉',
                    value: 'complaints',
                },
            ],
            maskList: [
                {
                    name: '最新排序',
                    value: 'new_sort',
                },
                {
                    name: '评论排序',
                    value: 'comment_sort',
                },
                {
                    name: '热门排序',
                    value: 'hot_sort',
                },
                {
                    name: '免费排序',
                    value: 'free_sort',
                },
                {
                    name: '收费排序',
                    value: 'fee_sort',
                },
            ],
            submitComplete: false,
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/label/index'
            this.init() //重新请求数据
        },

        del(id) {
            this.$request.del('/label/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
                this.worksId = form.id
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ''
                this.form = {
                    name: '',
                    type: '',
                    used: '',
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                name: '',
                type: '',
                used: '',
            }
        },

        //提交
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.name && this.form.type && this.form.used)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning',
                })
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request
                    .post('/label/create', this.form)
                    .then((res) => {
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                        })

                        this.init() //重新请求数据
                        this.closeBox()
                        this.submitComplete = false
                    })
                    .catch((error) => {
                        this.submitComplete = false
                    })
            } else {
                this.$request
                    .put('/label/update/' + this.worksId, this.form)
                    .then((res) => {
                        console.log(res)
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        })
                        this.init() //重新请求数据
                        this.closeBox()
                        this.submitComplete = false
                    })
                    .catch((error) => {
                        this.submitComplete = false
                    })
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>